<template>
  <div>
    <!-- 顶部区域 -->
    <el-radio v-model="radio" label="zh" @input="handleRadioChange"
      >zh</el-radio
    >
    <el-radio v-model="radio" label="en" @input="handleRadioChange"
      >en</el-radio
    >
    <div class="container">
      <el-input
        class="text-input"
        type="textarea"
        :rows="4"
        v-model="inputText"
        placeholder="请输入医学文本"
      ></el-input>
      <!-- <el-button type="primary" @click="submit">文本片段</el-button> -->
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
    <!-- 左侧边栏 -->
    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane
        label="实体抽取结果"
        name="entityExtraction"
       
        >实体抽取结果</el-tab-pane
      >
      <el-tab-pane
        label="关系抽取结果"
        name="relationExtraction"
        >关系抽取结果</el-tab-pane
      >
      <el-tab-pane label="图谱展示" name="graphDisplay" @click="getRelations"
        >图谱展示</el-tab-pane
      >
    </el-tabs>

    <!-- 结果展示区域 -->
    <div class="show-result" v-if="showResults">
      <div v-if="activeTab === 'entityExtraction'">
        <template>
          <el-descriptions
            :column="1"
            v-for="(item, index) in entityKeys"
            :key="index"
            border
          >
            <el-descriptions-item labelStyle="width: 200px;" :label="item"
              ><span>{{ entityValues[index] }}</span></el-descriptions-item
            >
          </el-descriptions>
        </template>
      </div>
      <div v-if="activeTab === 'relationExtraction'">
        <el-descriptions
          :column="1"
          v-for="(item, index) in relationList"
          :key="index"
          border
        >
          <el-descriptions-item
            :label="`(${item.source},  ${item.relation},  ${item.target})`"
          ></el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-if="activeTab === 'graphDisplay'">
        <div class="data-view">
          <el-card v-loading="loading" element-loading-text="加载中...">
            <div id="view"></div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
//   import * as echarts from 'echarts'
import { getText, getEntities, getRelations } from "../../api/api.js";
export default {
  data() {
    return {
      radio: "zh",
      inputText: "", // 存储输入的医学文本
      showResults: false, // 控制是否展示结果区域
      activeTab: "entityExtraction", // 初始默认选中实体抽取结果选项卡
      entityExtractionResults: "", // 存储实体抽取结果
      relationExtractionResults: "", // 存储关系抽取结果
      relationList: [],
      entityKeys: [],
      entityValues: [],
      nodes: [],
      links: [],
      loading: true,
    };
  },
  methods: {
    handleTabClick(tab) {
      console.log(tab);
    },
    getEntities() {
      getEntities(this.inputText)
        .then((response) => {
          console.log("abc:", this.activeTab);
          console.log(response);
          const result = response.data.entities;
          this.entityKeys = Object.keys(result);
          this.entityValues = Object.values(result).map((sublist) =>
            sublist.join(", ")
          );
          // this.entityValues = result
          console.log(this.entityKeys);
          console.log(this.entityValues);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    getRelations() {
      console.log("abc:", this.activeTab);
      getRelations(this.inputText)
        .then((response) => {
          console.log("abc:", this.activeTab);
          console.log(response);
          this.relationList = response.data.links;
          console.log(this.relationList);
          this.nodes = response.data.nodes;
          this.links = response.data.links;
          if (this.activeTab === "graphDisplay") {
            let dom = document.getElementById("view");
            let mychart = this.$echarts.init(dom); //初始化echarts实例
            const option = {
              title: {
                text: "",
              },
              series: [
                {
                  type: "graph",
                  layout: "force",
                  data: this.nodes.map((node) => ({
                    name: node,
                    symbolSize: 30,
                  })),
                  edges: this.links.map((link) => ({
                    source: link.source,
                    target: link.target,
                    label: {
                      show: true,
                      position: "middle",
                      formatter: link.relation,
                    },
                  })),
                  roam: true,
                  label: {
                    show: true,
                    position: "right",
                  },
                  emphasis: {
                    focus: "adjacency",
                    label: {
                      position: "right",
                      show: true,
                    },
                  },
                  force: {
                    repulsion: 2000,
                    edgeLength: 200,
                    gravity: 0.1,
                  },
                },
              ],
            };
            mychart.setOption(option);
            this.loading = false;
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    submit() {
      this.getEntities();
      this.getRelations();
      this.showResults = true; // 展示结果区域
      //   this.$nextTick(() => {
      //     // this.chart = echarts.init(this.$refs.chart) // 在DOM元素渲染完毕后初始化图表
      //     // this.chart.setOption(this.option) // 更新图表
      //   });
    },
    handleRadioChange(value) {
      console.log("选择了：", value);
      getText(value)
        .then((response) => {
          console.log(response);
          this.inputText = response.data.content;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
  mounted(){
    this.handleRadioChange("zh");
  }
};
</script>
  
  <style lang="scss">
.container {
  display: flex;
  justify-content: space-between;
}

.el-textarea__inner {
  font-size: 20px;
}

.el-button {
  margin: 20px;
  height: 50px;
  width: 80px;
}
.data-view {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .el-card {
    width: 100%;
    #view {
      height: 1000px;
      width: 100%;
    }
  }
}
</style>
  